<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" name="username">
    <script>
        // ()   当做整体看待  拿整体去匹配  
        // []   这里边任意一个
        // [^]  只要不是[]中的就满足 
        // |   baidu|google 任意一个单词 
        //  -    a-zA-Z0-9  表示范围  

        // ()  

        // ()@()\.()
        // var inp = document.querySelector('input');
        // inp.onblur = function () {
        //     var v = inp.value;
        //     var reg = /^(hello){2}$/;  // 把hello当做一个整体来看待 
        //     if (reg.test(v)) {
        //         alert('合法') // 'hellohello'才满足要求
        //     }
        //     else {
        //         alert('不满足要求')
        //     }

        // }

        // [] 
        // var inp = document.querySelector('input');
        // inp.onblur = function () {
        //     var v = inp.value;
        //     // var reg = /[abcd]/;  // 匹配的是一位 // 'hello' 判断 里边是否有a或者b或者c或者d的任意一个
        //     // var reg = /^[abcd]+$/; // 从头到尾 必须是1位 因为 必须以这一个开头 以这一个结尾 
        //     // abcd中任意一位 出现 1次 或者 多次  都满足要求 
        //     var reg = /^[abcd]?$/; 
        //     //  abcd中任意一位 出现 0次 或者 1次
        //     if (reg.test(v)) {
        //         alert('合法') 
               
        //     }
        //     else {
        //         alert('不满足要求')
        //     }

        // }


        // var inp = document.querySelector('input');
        // inp.onblur = function () {
        //     var v = inp.value;
        //     // var reg = /^(迪丽热巴|古力娜扎|热依扎)$/;
        //      //  ()内被看作一个整体   |左右任意一个都满足要求  
        //     var reg = /^(迪丽热巴|古力娜扎|热依扎){2}$/; 
        //     // 这个整体严格出现两次 整体里中 必须是三个中的任意一个
        //     if (reg.test(v)) {
        //         alert('合法') 
               
        //     }
        //     else {
        //         alert('不满足要求')
        //     }

        // }


        // var inp = document.querySelector('input');
        // inp.onblur = function () {
        //     var v = inp.value;
        //     // var reg = /^[a-zA-Z0-9_$]$/;  // 这是在匹配一位 
        //     // 从头到尾只有一位 这一位是中括号中的任意一个满足要求 
        //     // 一个以上立马报错  
        //     var reg = /^[a-zA-Z0-9_$]{6,30}$/; 
        //     // 至少6 最多30 每一位都必须在 中括号的范围内  
        //     // 一个以上立马报错  
        //     if (reg.test(v)) {
        //         alert('合法') 
               
        //     }
        //     else {
        //         alert('不满足要求')
        //     }

        // }

            // ? 前面的字符 0个 或者 1个 
        //   var inp = document.querySelector('input');
        // inp.onblur = function () {
        //     var v = inp.value;
        //     // var reg = /^[^a-zA-Z0-9_$]+$/;
        //     var reg = /^[^a-zA-Z0-9_$]?$/; 
        //     // 在字符串中 只要有一个 或者 0个字符 不在里边才满足要求 
        //     // 2个及以上 报错 
        //     // 只要不在里边  一个或者多个 都满足要求 
        //     if (reg.test(v)) {
        //         alert('合法') 
               
        //     }
        //     else {
        //         alert('不满足要求')
        //     }

        // }



        //  1 第一位 
        //  第二位 不能是  0 1 2  [3-9]
        //  第三位 0-9
        //   第4位 0-9
        // 第5位 0-9
        // 第6位 0-9
        // 第7位 0-9
        // 第8位 0-9
        // 第9位 0-9
        // 第10位 0-9
        // 第11位 0-9

        
        var inp = document.querySelector('input');
        inp.onblur = function () {
            var tel = inp.value;
            var regs= /^1[3-9]\d{9}$/; 
            // 1 是匹配第一位  ^ 表示 严格1开头
            // [3-9] 第二位
            // \d{9} 第三到第十一位都是0-9任意一个 
            //$ 以数字结尾  


            if (regs.test(tel)) {
                alert('合法') 
               
            }
            else {
                alert('不满足要求')
            }

        }

        // abc@163.com
        // 123@qq.com 
        //xifeng.com@yujie.cn 
        //xifeng-com@yujie.gov.cn 

        ///   用户的名字  @ 域名.顶级域名
        //  @ . 每个一定会有 
        // . 匹配除了换行符以外的任意字符 但是此时此刻 我们当做点去匹配
        // 让这个.变成不同的字符  
        // 加上 \  .就变成了普通的字符 
        // j@qq.com
        // - 在中括号表示范围 我们现在当做一个普通-去验证  所以加  \ 转义符
        //   第一部分  @左边的 至少1个字符  选择范围 0-9a-zA-Z_-.   [0-9a-zA-Z_\-\.]
        //   第二部分  @右边的 [0-9a-zA-Z_\-]
        //   第三部分  .右边的 [a-z]{2,6}
        // var  res = /([0-9a-zA-Z_\-\.]+)@( [0-9a-zA-Z_\-]+)\.([a-z]{2,6})/;


    </script>
</body>
</html>